<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Cell Editing in DataGrid - jQuery EasyUI Demo</title>
	
	
	<script type="text/javascript" src="js/jquery-easyui-1.5.4.2/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery-easyui-1.5.4.2/locale/easyui-lang-zh_CN.js"></script>
	<script type="text/javascript" src="js/jquery-easyui-1.5.4.2/jquery.easyui.min.js"></script>
	<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5.4.2/themes/icon.css"/>
	<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5.4.2/themes/black/easyui.css"/>
	<script type="text/javascript" src="js/datagrid-cellediting.js"></script>
	<script type="text/javascript">
		var data = {"total":28,"rows":[
			{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
			{"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
			{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
		]}

		$(function(){
			$('#dg').datagrid({
				data: data
			}).datagrid('enableCellEditing').datagrid('gotoCell', {
				index: 0,
				field: 'productid'
			});
		});
	</script>
</head>
<body>
	<h2>Cell Editing in DataGrid</h2>
	<p>Click a cell to start editing.</p>
	<div style="margin:20px 0;"></div>
	
	<table id="dg" title="Cell Editing in DataGrid" style="width:700px;height:200px">
		<thead>
			<tr>
				<th data-options="field:'itemid',width:100">Item ID</th>
				<th data-options="field:'productid',width:100,editor:'text'">Product</th>
				<th data-options="field:'listprice',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}">List Price</th>
				<th data-options="field:'unitcost',width:80,align:'right',editor:'numberbox'">Unit Cost</th>
				<th data-options="field:'attr1',width:250,editor:'text'">Attribute</th>
				<th data-options="field:'status',width:60,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}">Status</th>
			</tr>
		</thead>
	</table>
</body>
</html>